/**
 * 在线作业
 */

<template>
  <div class="contenBox">
    <!-- 左侧导航 -->
    <div class="leftTree">
      <div class="leftTreeBox">
        <el-tree
          :data="treeData"
          :highlight-current="true"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>

    <div class="rightContent">
      <div class="rightTop">
        <div class="rightTitle">
          <span>管理列表 </span>
        </div>
        <div class="rightSearch">
          <div class="rightSearchInput">
            <el-input
              v-model="taskName"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              @input="searchInput"
            ></el-input>
          </div>

          <el-button class="searchBtn" type="primary" @click="openAdd">
            <i class="el-icon-plus"></i>
            <span>新增作业</span>
          </el-button>

          <el-button class="resetBtn" @click="refreshInput">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </el-button>
        </div>
      </div>
      <div class="rightBottom">
        <!-- 表格 -->
        <div class="bottomMian">
          <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="taskName" label="作业名称">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="截止时间"
              min-width="150"
            ></el-table-column>
            <el-table-column prop="createBy" label="创建人"> </el-table-column>
            <el-table-column prop="action" label="操作">
              <template slot-scope="scope">
                <div class="action">
                  <span
                    class="icon iconfont icon-bianji"
                    @click="editCourse(scope.row)"
                  ></span>
                  <span
                    class="icon iconfont icon-shanchu"
                    @click="delCourse(scope.row.id)"
                  ></span>
                  <span class="copy">发布</span>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination" v-if="list.length > 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              prev-text="上一页"
              next-text="下一页"
              layout=" prev, pager, next"
              :total="total"
            >
            </el-pagination>
            <div class="jumper">
              跳到第
              <input type="text" ref="currentPage" value="1" />
              页
            </div>
            <button class="submit" @click="goPage">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/styles/picture.scss";
import { _debounce } from "@/utils/debounce";
import { colleageTreeDataApi } from "@/api/basics/college.js";
import { getListApi, delOnlineWorkApi } from "@/api/onlineWork/onlineWork";
export default {
  data() {
    return {
      list: [],
      total: 0,
      taskName: "",
      multipleSelection: [],
      currentPage: 1,
      isMask: false,
      pageSize: 10,
      isEdit: false,
      treeData: [], // 左侧树数据
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  created() {
    // 获取课程列表
    this.getList({ pageNum: this.currentPage, pageSize: this.pageSize });

    // 获取 左侧树 列表
    this.getTree();
  },

  methods: {
    // 获取 左侧树 列表
    getTree() {
      colleageTreeDataApi()
        .then((res) => {
          this.treeData = res.data;
        })
        .catch(() => {});
    },

    //  获取列表  / 搜索
    getList(data) {
      getListApi(data).then((result) => {
        if (result.code === 200) {
          this.list = result.rows;
          this.total = result.total;
        }
      });
    },

    handleNodeClick(data) {
      console.log(data)      
      if(data.id) {
        console.log(data.id)
        this.getList({colleage:data.id})
      }
      // else if(data.classId) {
      //   this.getList({colleage:data.colleageId,major:data.majorId,clbum:data.classId})
      // }else {
      //   this.getList({colleage:data.colleageId,major:data.majorId})
      // }
    },

    // 搜索
    searchInput: _debounce(function () {
      this.getList({
        taskName: this.taskName,
      });
    }, 200),

    // 重置
    refreshInput: _debounce(function () {
      this.taskName = "";
      this.getList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    }, 200),

    // 新增课程
    openAdd() {
      this.isEdit = false;
      this.$router.push("/addOnlineWork");
    },

    // 删除
    delCourse(id) {
      this.$confirm("此操作将删除该作业, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })  
        .then(() => {
          delOnlineWorkApi({ id }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功!");
              this.getList({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
              });
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {});
    },
                                                                                                                                                                                                                                                                                                                                                                                           
    // // 批量删除
    // batchDelCourse() {
    //   if (this.multipleSelection.length) {
    //     let data = [...this.multipleSelection].map((item) => {
    //       return "" + item.courseId;
    //     });
    //     this.$confirm("此操作将删除已选择的作业, 是否继续?", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     })
    //       .then(() => {
    //         delOnlineWorkApi({ ids: data.join(",") }).then((res) => {
    //           if (res.code === 200) {
    //             this.$message.success("删除成功!");
    //             this.getList({
    //               pageNum: this.currentPage,
    //               pageSize: this.pageSize,
    //             });
    //           } else {
    //             this.$message.error("删除失败!");
    //           }
    //         });
    //       })
    //       .catch(() => {});
    //   } else {
    //     this.$message.error("请选择要删除的作业！");
    //   }
    // },

    // 修改
    editCourse(data) {
      console.log(data);
      this.isEdit = true;
      this.$router.push({
        path: "/addOnlineWork",
        query: { id: data.id },
      });
    },

    // 选择 / 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 更改当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },

    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      this.getList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contenBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 15px 15px;
  box-sizing: border-box;
  .leftTree {
    min-width: 250px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;

    .leftTreeBox {
      width: 100%;
      height: calc(100vh - 110px);
    }

    ::v-deep .el-tree {
      width: 100%;
    }

    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 15px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }
  }

  .rightContent {
    min-width: calc(100vh - 230px);
    width: 100%;
    background-color: #fff;
    margin-left: 15px;

    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px 0;
      box-sizing: border-box;

      .rightTitle {
        color: #65a6e0;
        font-size: 20px;
        font-weight: bold;
      }

      .rightSearch {
        display: flex;

        .resetBtn {
          height: 38px;
          background-color: #6ccfcc;
          display: flex;
          align-items: center;
          border: none;
          span,
          i {
            color: #fff;
          }

          i {
            font-size: 16px;
          }
        }

        .rightSearchInput {
          height: 34px;
          display: flex;
          align-items: center;
          color: #d4d4d4;
          border: solid 1px #d4d4d4;
          margin-right: 15px;
          border-radius: 5px;
          line-height: 32px;

          ::v-deep .el-input__inner {
            height: 32px;
            border: none !important;
          }

          ::v-deep .el-input__icon {
            font-size: 18px;
            line-height: 34px;
          }

          ::v-deep .el-icon-search {
            font-size: 18px;
            line-height: 34px;
          }
        }

        ::v-deep .el-button {
          padding: 0 10px;
          height: 34px;
          line-height: 34px;
        }

        ::v-deep.el-icon-plus,
        ::v-deep.el-icon-close {
          font-size: 16px;
        }
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      .icon {
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        margin: 0 6px;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;

          input {
            width: 40px;
            height: 26px;
            margin: 0 5px;
            text-align: center;
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #666;
            outline-style: none;
          }
        }

        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
          color: #666;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }
}
.courseBoxTopSearch {
  ::v-deep .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
}

.action {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  .copy {
    margin-left: 6px;
    color: #4b93d5;
    cursor: pointer;
  }
}
</style>